<template>
  <div>
    <div class="ul">
      <div v-for="item in pictures" :key="item.id" class="li">
        <div class="mar" :class="item.ison ? 'on' : ''" @click="handleSelect(item)">
          <span class="checkbox" />
          <input type="checkbox" />
          <img src="@/assets/1.jpg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pictures: [
        {
          id: 1,
          name: 'pic1',
          ison: false,
          src: '@/assets/header.jpeg'
        },
        {
          id: 2,
          name: 'pic2',
          ison: false,
          src: '@/assets/1.jpg'
        },
        {
          id: 3,
          name: 'pic3',
          ison: false,
          src: '@/assets/2.jpg'
        },
        {
          id: 4,
          name: 'pic4',
          ison: false,
          src: '@/assets/1.jpg'
        }
      ]
    }
  },
  methods: {
    handleSelect(val) {
      val.ison = !val.ison
    }
  }
}
</script>

<style>
.ul:after {
  content: '';
  display: block;
  clear: both;
}

.ul {
  background-color: #ccc;
  padding: 40px 35px 0;
  user-select: none;
}

.li {
  /* width: 25%; */
  float: left;
  margin-bottom: 40px;
}

.li .mar {
  margin: 0 20px;
  width: 150px;
  height: 150px;
  background-color: #ddd;
  position: relative;
}

.li .mar.on {
  background-color: #4892db;
}

.li .mar input[type='checkbox'] {
  visibility: hidden;
}

.checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #13b8cb;
  background-color: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 33;
}

.checkbox:before,
.checkbox:after {
  content: '';
  display: block;
  background-color: #fff;
  height: 2px;
  position: absolute;
}

.checkbox:before {
  width: 7px;
  top: 7px;
  left: 0px;
  transform: rotate(45deg);
}

.checkbox:after {
  width: 12px;
  top: 6px;
  left: 3px;
  transform: rotate(-45deg);
}

.li .mar.on .checkbox {
  background-color: #13b8cb;
}

.li .mar.on .checkbox:after,
.li .mar.on .checkbox:before {
  background-color: #fff;
}

.li .mar img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 100%;
  max-height: 100%;
  transform: translateX(-50%) translateY(-50%);
}
</style>
